<template>
	<view>
		<scroll-view scroll-y class="page">
			<cu-custom bgColor="bg-gradual-blue" :isBack="true">
				<block slot="backText">返回</block>
				<block slot="content">职工信息</block>
				<view slot="right" @tap="rightClick">编辑</view>
			</cu-custom>
			<!-- list列表 -->
			<uni-section title="职工信息" type="line" class="animation-scale-down" :style="[{animation: 'show 0.5s 1'}]">
				<view class="cu-list menu">
					<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.2s'}]">
						<view class="content">
							<text class="text-grey">姓名</text>
						</view>
						<view class="action">
							<text class="text-grey">{{personalMsg.name}}</text>
						</view>
					</view>
					<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.2s'}]">
						<view class="content">
							<text class="text-grey">性别</text>
						</view>
						<view class="action">
							<text class="text-grey">{{personalMsg.sex==1?'男':'女'}}</text>
						</view>
					</view>
					<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.2s'}]">
						<view class="content">
							<text class="text-grey">年龄</text>
						</view>
						<view class="action">
							<text class="text-grey">{{personalMsg.age}}</text>
						</view>
					</view>
					<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.2s'}]">
						<view class="content">
							<text class="text-grey">职工号</text>
						</view>
						<view class="action">
							<text class="text-grey">{{personalMsg.no}}</text>
						</view>
					</view>
					<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.2s'}]">
						<view class="content">
							<text class="text-grey">身份证号</text>
						</view>
						<view class="action">
							<text class="text-grey">{{personalMsg.idcard}}</text>
						</view>
					</view>
				</view>
			</uni-section>
			<uni-section title="职工家庭信息" type="line" class="animation-scale-down" :style="[{animation: 'show 0.5s 1'}]">
				<view class="cu-list menu">
					<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.3s'}]">
						<view class="content">
							<text class="text-grey">家庭住址</text>
						</view>
						<view class="action">
							<text class="text-grey">{{personalMsg.address}}</text>
						</view>
					</view>
				</view>
			</uni-section>
			<uni-section title="职工婚姻状况" type="line" class="animation-scale-down" :style="[{animation: 'show 0.5s 1'}]">
				<view class="cu-list menu">
					<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.3s'}]">
						<view class="content">
							<text class="text-grey">婚姻状况</text>
						</view>
						<view class="action">
							<text class="text-grey">{{personalMsg.ismarried?'已婚':'未婚'}}</text>
						</view>
					</view>
					<template v-if="personalMsg.ismarried">
						<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.3s'}]">
							<view class="content">
								<text class="text-grey">配偶姓名</text>
							</view>
							<view class="action">
								<text class="text-grey">{{personalMsg.sname}}</text>
							</view>
						</view>
						<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.3s'}]">
							<view class="content">
								<text class="text-grey">配偶身份证号</text>
							</view>
							<view class="action">
								<text class="text-grey">{{personalMsg.sidcard}}</text>
							</view>
						</view>
						<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.3s'}]">
							<view class="content">
								<text class="text-grey">配偶户口所在地</text>
							</view>
							<view class="action">
								<text class="text-grey">{{personalMsg.shousehold}}</text>
							</view>
						</view>
						<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.3s'}]">
							<view class="content">
								<text class="text-grey">配偶工作单位</text>
							</view>
							<view class="action">
								<text class="text-grey">{{personalMsg.sworkCompany}}</text>
							</view>
						</view>
						<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.4s'}]">
							<view class="content">
								<text class="text-grey">结婚证</text>
							</view>
							<view class="action">
								<text class="text-grey">
									<template v-if="personalMsg.marriageBook===null">
										<text class="cuIcon-close text-red">未上传</text>
									</template>
									<template v-else>
										<text class="cuIcon-check text-green">已上传</text>
									</template>
								</text>
							</view>
						</view>
						<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.4s'}]">
							<view class="content">
								<text class="text-grey">配偶身份证</text>
							</view>
							<view class="action">
								<text class="text-grey">
									<template v-if="personalMsg.sidcardImg===null">
										<text class="cuIcon-close text-red">未上传</text>
									</template>
									<template v-else>
										<text class="cuIcon-check text-green">已上传</text>
									</template>
								</text>
							</view>
						</view>
					</template>
				</view>
			</uni-section>
			<uni-section title="职工资料上传" type="line" class="animation-scale-down" :style="[{animation: 'show 0.5s 1'}]">
				<view class="cu-list menu">
					<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.4s'}]">
						<view class="content">
							<text class="text-grey">身份证</text>
						</view>
						<view class="action">
							<text class="text-grey">
								<template v-if="personalMsg.idcardFront===null||personalMsg.idcardBack===null">
									<text class="cuIcon-close text-red">未上传</text>
								</template>
								<template v-else>
									<text class="cuIcon-check text-green">已上传</text>
								</template>
							</text>
						</view>
					</view>
					<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.4s'}]">
						<view class="content">
							<text class="text-grey">户口本</text>
						</view>
						<view class="action">
							<text class="text-grey">
								<template v-if="personalMsg.houseBook===null">
									<text class="cuIcon-close text-red">未上传</text>
								</template>
								<template v-else>
									<text class="cuIcon-check text-green">已上传</text>
								</template>
							</text>
						</view>
					</view>
					<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.4s'}]">
						<view class="content">
							<text class="text-grey">人事通知书</text>
						</view>
						<view class="action">
							<text class="text-grey">
								<template v-if="personalMsg.notificationBook===null">
									<text class="cuIcon-close text-red">未上传</text>
								</template>
								<template v-else>
									<text class="cuIcon-check text-green">已上传</text>
								</template>
							</text>
						</view>
					</view>
					<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.4s'}]">
						<view class="content">
							<text class="text-grey">不动产查册证明</text>
						</view>
						<view class="action">
							<text class="text-grey">
								<template v-if="personalMsg.estateBook===null">
									<text class="cuIcon-close text-red">未上传</text>
								</template>
								<template v-else>
									<text class="cuIcon-check text-green">已上传</text>
								</template>
							</text>
						</view>
					</view>
					<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.4s'}]">
						<view class="content">
							<text class="text-grey">住房证明</text>
						</view>
						<view class="action">
							<text class="text-grey">
								<template v-if="personalMsg.residenceBook===null">
									<text class="cuIcon-close text-red">未上传</text>
								</template>
								<template v-else>
									<text class="cuIcon-check text-green">已上传</text>
								</template>
							</text>
						</view>
					</view>
				</view>
			</uni-section>
		</scroll-view>
	</view>
</template>

<script>
	import api from '@/api/api.js'
	export default {
		data() {
			return {
				personalMsg: {},
				employeeUrl: '/base/znzfEmployee/queryByUid',
				departUrl: '/sys/user/userDepartList'
			};
		},
		onLoad() {
			this.loadinfo()
		},
		methods: {
			getSubStringText(text, len) {
				if (!text || text.length == 0) {
					return ''
				}
				if (text.length < len) {
					return text;
				}
				return text.substr(0, len) + "..."
			},
			rightClick() {
				this.$Router.push({
					name: 'employeeEdit',
				})
			},
			loadinfo() {
				this.$http.get(this.employeeUrl, {
					params: {
						uid: this.$store.getters.userid
					}
				}).then(res => {
					console.log('employeeUrl：', res)
					if (res.data.success) {
						this.personalMsg = res.data.result
					}
				}).catch(e => {
					console.log("请求错误", e)
				})
			},
		}
	}
</script>

<style lang='scss'>
	.page {
		height: 100Vh;
		width: 100vw;
	}

	.page.show {
		overflow: hidden;
	}

	.switch-sex::after {
		content: "\e716";
	}

	.switch-sex::before {
		content: "\e7a9";
	}

	.switch-music::after {
		content: "\e66a";
	}

	.switch-music::before {
		content: "\e6db";
	}
</style>
